<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>详情页面代码模版</title>
    <title>详情页面代码模版</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
    <style>
        .thumb {margin-left:5px; margin-top:15px; height:128px}
        #prevModal {width:100%; height:100%; text-align:center; display:none;}
        #img_prev {max-width:98%; max-height:98%; margin: 10px auto}
    </style>
</head>
<body>

<div class="layui-form" lay-filter="LAY-form-display" id="LAY-form-display"
     style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">练习题日期<i style="color:red">*</i></label>
        <div class="layui-input-inline">
            <input id="trainDateInput" type="text" class="layui-input LAY-date" placeholder="请选择日期"
                   autocomplete="off"
                   name="trainDate" lay-verify="date" lay-verType="tips">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会计类别</label>
        <div class="layui-input-inline">
            <select name="label" lay-filter="LAY-select">
                <option value="" selected>请选择</option>
                <option value="ZJ">中级</option>
                <option value="CPA">注会CPA</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">科目</label>
        <div class="layui-input-inline">
            <select name="course" id="course"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">答案选项</label>
        <div class="layui-input-block">
            <input type="radio" name="single" value="1" title="单选" checked>
            <input type="radio" name="single" value="2" title="多选">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">题目<i style="color:red">*</i></label>
        <div class="layui-input-inline">
                <textarea name="question" placeholder="请输入内容" class="layui-textarea" lay-verify="required" lay-verType="tips"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">答案<i style="color:red">*</i></label>
        <div class="layui-input-inline">
            <input type="text" name="answer" placeholder="请输入答案" autocomplete="off" class="layui-input"
                   lay-verify="required" lay-verType="tips">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">解析<i style="color:red">*</i></label>
        <div class="layui-input-inline">
                <textarea name="explain" placeholder="请输入内容" class="layui-textarea" lay-verify="required"
                          lay-verType="tips"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传题目图片</label>
        <div class="layui-input-inline uploadQuestionImg">
            <div class="layui-upload-drag" id="questionImg">
                <i class="layui-icon"></i>
                <p>点击上传图片，或将图片拖拽到此处</p>
            </div>
        </div>
        <div class="layui-input-block" id="div_prev"></div>
      <!--  <div class="layui-input-inline" id="img_pre">
            &lt;!&ndash;<div class="layui-upload-list">
                <img class="layui-upload-img headImage" id="uploadPreview">
            </div>&ndash;&gt;
        </div>-->
    </div>



<!--    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY-add-submit">立即提交</button>
            <button type="reset" class="layui-btn">重置</button>
            <button type="button" class="layui-btn LAY-from-close">关闭</button>
        </div>
    </div>-->

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-form-submit" id="LAY-form-submit"
               value="确认添加/编辑">
        <input type="text" name="id">
        <button lay-active="get" id="getBtn">获取详情</button>
    </div>
</div>

<!--点击小图查看大图-->
<div id="prevModal">
    <img id="img_prev" src=""/>
</div>

<script src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'util', 'laydate', 'upload'], function () {
        let $ = layui.$
            , form = layui.form
            , util = layui.util
            , laydate = layui.laydate
            , upload = layui.upload;

        lay('.LAY-date').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click'
            });
        });


        /*静态变量*/
        const server = {
            add: '/financialTemplate/add',
            update: '/financialTemplate/update',
            get: '/financialTemplate/get',
            listCourse : '/financialTemplate/listCourse',
            upload: '/financialTemplate/upload'
        };

        // 上传图片
        let uploadInst = upload.render({
            elem: '#questionImg',
            url: server.upload,
            before: function(obj){
              // 预览
                obj.preview(function (index, file, result) {
                    // 创建img对象
                    let imgObj = new Image();
                    imgObj.src = result;
                    imgObj.className = 'thumb';
                    imgObj.onclick = function(result) {
                        console.log(this.src)
                        //单击预览
                        $('#img_prev').attr('src', this.src);
                        let w = $(window).width() - 42, h = $(window).height() - 42;

                        layer.open({
                            title: '预览',
                            type: 1,
                            area: [w+'px', h+"px"], //宽高
                            content: $('#prevModal'),
                            closeBtn: 1
                        });
                    };
                    $('#div_prev').append(imgObj);
                });
            },
            done: function(res){
                console.log('上传完毕回调：：：'+ JSON.stringify(res));
                let data = res.data;
                form.val('LAY-form-display', {
                    question: data.question,
                    answer: data.answer,
                    explain: data.explain
                });
            },
            error: function(){
                console.log('上传异常');
            },
            accept: 'images',
            acceptMime: 'image/*',
            size: 1024
        });


        // 监听提交
        form.on('submit(LAY-form-submit)', function (data) {
            let field = data.field; //获取提交的字段
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            let url = server.add;
            // 存在id 更新
            if (field.id) {
                url = server.update;
            }
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            //$.ajax({});
            $.post(url, JSON.stringify(field), function (res) {
                if (res.code !== 0) {
                    layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                } else {
                    layer.msg('操作成功', {icon: 6});
                    parent.layui.table.reload('LAY-table'); //重载表格
                    parent.layer.close(index); //再执行关闭
                }
            }, 'JSON');
        });

        // 监听下拉框
        form.on('select(LAY-select)', function (data) {
            $("#course").empty();
            $.get(server.listCourse + '/' + data.value, function (data, resStatus) {
                if (data.code === 0 && data.data.length != 0) {
                    $("#course").append(new Option("请选择", ""));
                    $.each(data.data, function (index, item) {
                        $("#course").append(new Option(item.name, item.id));
                    });
                }
                form.render("select");
            });
        });

        // 监听按钮时间
        util.event('lay-active', {
            get: function (o) {
                let id = $('[name="id"]').val();

                $.get(server.get + '/' + id, function (res) {
                    if (res.code != 0) {
                        layer.msg('获取详情异常,' + res.message);
                        return;
                    }
                    let data = res.data;
                    form.val('LAY-form-display', {
                        id: data.id,
                        trainDate: data.trainDate,
                        label: data.label,
                        course: data.course,
                        question: data.question,
                        answer: data.answer,
                        explain: data.explain
                    });
                });

            }
        })


    })
</script>
</body>
</html>